import React, { Component } from 'react'
import styles from './index.less'
import LinkStateView from '../LinkState'
import { Card, Modal, Form, Input, Select, Icon  } from 'antd';
const { Option } = Select;
import { connect } from 'dva'

const tabList = [{
    key: 'global',
    tab: '统一网关配置',
  }];
  
@connect(({ setting, loading }) => ({ 
    setSettingList: setting.setSettingList,
    isFresh: setting.isFresh
}))
class SettingView extends Component {

    state = {
        key: 'global',
        modalIsShow: false, //modal是否显示
        //网关设置
        id:'',
        host:'',
        post:'',
        sourceAddr:'',
        sharedSecret:'',
        heartbeatInterval:'',
        reconnectInterval:'',
        heartbeatNoresponseout:'',
        transactionTimeout:'',
        serviceId:'',
        version:'',
        debug:'',
        srcTerminalId:''
    }

    clear = () => {
        this.setState({
            id:'',
            host:'',
            post:'',
            sourceAddr:'',
            sharedSecret:'',
            heartbeatInterval:'',
            reconnectInterval:'',
            heartbeatNoresponseout:'',
            transactionTimeout:'',
            serviceId:'',
            version:'',
            debug:'',
            srcTerminalId:''
        })
    }
    
    handleOk = () =>{
        console.log("submit")
        this.props.form.validateFields(
          (err) => {
            if (!err) {
              const { dispatch, form:{ getFieldsValue } } = this.props
              const { key } = this.state
              const { host, post, sourceAddr,
                sharedSecret, heartbeatInterval, reconnectInterval,
                heartbeatNoresponseout, transactionTimeout, serviceId, version,
                debug, srcTerminalId} = getFieldsValue()
                console.log(getFieldsValue())
                this.setState({
                    modalIsShow: false
                })
            dispatch({
                type: 'setting/fetchSaveSetting',
                payload: {
                    id:key,
                    host:host,
                    post:post,
                    sourceAddr:sourceAddr,
                    sharedSecret:sharedSecret,
                    heartbeatInterval:heartbeatInterval,
                    reconnectInterval:reconnectInterval,
                    heartbeatNoresponseout:heartbeatNoresponseout,
                    transactionTimeout:transactionTimeout,
                    serviceId:serviceId,
                    version:version,
                    debug:debug,
                    srcTerminalId:srcTerminalId
                }
            })
            }
          },
        );
    }

    handleCancel = ()=>{
        this.setState({
            modalIsShow: false
        })
    }

    onTabChange = (key, type) => {
        console.log(key, type);
        this.setView(key)
        this.setState({ 
            [type]: key,
        })
    }

    setView = (key)=>{
        const { setSettingList } = this.props
        console.log(key);
        let id
        let host
        let post
        let sourceAddr
        let sharedSecret
        let heartbeatInterval
        let reconnectInterval
        let heartbeatNoresponseout
        let transactionTimeout
        let serviceId
        let version
        let debug
        let srcTerminalId
        setSettingList.forEach(element => {
            if(element.id === key){
                id=element.id,
                host=element.host,
                post=element.post,
                sourceAddr=element.sourceAddr,
                sharedSecret=element.sharedSecret,
                heartbeatInterval=element.heartbeatInterval,
                reconnectInterval=element.reconnectInterval,
                heartbeatNoresponseout=element.heartbeatNoresponseout,
                transactionTimeout=element.transactionTimeout,
                serviceId=element.serviceId,
                version=element.version,
                debug=element.isDebug,
                srcTerminalId=element.srcTerminalId
            }
        });

        this.setState({ 
            id:id,
            host:host,
            post:post,
            sourceAddr:sourceAddr,
            sharedSecret:sharedSecret,
            heartbeatInterval:heartbeatInterval,
            reconnectInterval:reconnectInterval,
            heartbeatNoresponseout:heartbeatNoresponseout,
            transactionTimeout:transactionTimeout,
            serviceId:serviceId,
            version:version,
            debug:debug,
            srcTerminalId:srcTerminalId
        });
    }

    render() {
        const {
            form: { getFieldDecorator, setFieldsValue },
            dispatch
        } = this.props

        const {
            id,
            host,
            post,
            sourceAddr,
            sharedSecret,
            heartbeatInterval,
            reconnectInterval,
            heartbeatNoresponseout,
            transactionTimeout,
            serviceId,
            version,
            debug,
            srcTerminalId,

            modalIsShow,
            key
        } = this.state
        return (
            <div className={styles.content}>
                <LinkStateView />
                <Card 
                    className={styles.card}
                    title="网关参数配置"
                    extra={<a href="#" onClick = {()=>{
                        setFieldsValue({
                            host:host,
                            post:post,
                            sourceAddr:sourceAddr,
                            sharedSecret:sharedSecret,
                            heartbeatInterval:heartbeatInterval,
                            reconnectInterval:reconnectInterval,
                            heartbeatNoresponseout:heartbeatNoresponseout,
                            transactionTimeout:transactionTimeout,
                            serviceId:serviceId,
                            version:version,
                            debug:debug===undefined?debug:debug.toString(),
                            srcTerminalId:srcTerminalId
                        })
                        this.setState({
                            modalIsShow: true
                        })
                    }}>{ '设置' }</a>}
                    actions={[<div onClick={()=>{
                            dispatch({
                                type: 'setting/fetchUseSetting',
                            })
                        }}><Icon type="check"/>应用</div>]}
                    tabList={tabList}
                    style={{ width: '80%' }}
                    activeTabKey={this.state.key}
                    onTabChange={(key) => { this.onTabChange(key, 'key'); }}
                >   
                    <p>服务器IP地址： {host}</p>
                    <p>服务器端口号： {post}</p>
                    <p>企业码： {sourceAddr}</p>
                    <p>签名码： {serviceId}</p>
                    <p>密码： {sharedSecret}</p>
                    <p>接入号： {srcTerminalId}</p>
                    <p>心跳信息发送间隔时间(单位：秒)： {heartbeatInterval}</p>
                    <p>连接中断时重连间隔时间(单位：秒)： {reconnectInterval}</p>
                    <p>需要重连时，连续发出心跳而没有接收到响应的个数（单位：个)： {heartbeatNoresponseout}</p>
                    <p>操作超时时间(单位：秒)： {transactionTimeout}</p>
                    <p>双方协商的版本号(大于0，小于256)： {version}</p>
                    <p>是否属于调试状态： {id?debug?"是":"否":''}</p>
                </Card>
                <Modal
                    title={key==='global'?"统一网关配置":"异网网关配置"}
                    visible={modalIsShow}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    okText="确认"
                    cancelText="取消"
                    >
                    <Form  >
                        <Form.Item>
                            {getFieldDecorator('host', {
                            rules: [{
                                required: true, message: '请输入id地址',
                            }],
                            })(
                            <Input placeholder={'IP地址'} />
                            )}
                        </Form.Item>
                        <Form.Item>
                            {getFieldDecorator('post', {
                            rules: [{
                                required: true, message: '请输入端口号',
                            }],
                            })(
                            <Input placeholder={'端口号'}/>
                            )}
                        </Form.Item>
                        <Form.Item>
                            {getFieldDecorator('sourceAddr', {
                            rules: [{
                                required: true, message: '请输入企业码',
                            }],
                            })(
                            <Input placeholder={'企业码'}/>
                            )}
                        </Form.Item>
                        <Form.Item>
                            {getFieldDecorator('serviceId', {
                            rules: [{
                                required: true, message: '请输入签名码',
                            }],
                            })(
                            <Input placeholder={'签名码'}/>
                            )}
                        </Form.Item>
                        <Form.Item>
                            {getFieldDecorator('sharedSecret', {
                            rules: [{
                                required: true, message: '请输入密码',
                            }],
                            })(
                            <Input placeholder={'密码'}/>
                            )}
                        </Form.Item>
                        <Form.Item>
                            {getFieldDecorator('srcTerminalId', {
                            rules: [{
                                required: true, message: '请输入接入号',
                            }],
                            })(
                            <Input placeholder={'接入号'}/>
                            )}
                        </Form.Item>
                        <Form.Item>
                            {getFieldDecorator('heartbeatInterval', {
                            rules: [{
                                required: true, message: '请输入心跳发送间隔',
                            }],
                            })(
                            <Input placeholder={'心跳发送间隔'}/>
                            )}
                        </Form.Item>
                        <Form.Item>
                            {getFieldDecorator('reconnectInterval', {
                            rules: [{
                                required: true, message: '请输入中断重连间隔',
                            }],
                            })(
                            <Input placeholder={'中断重连间隔'}/>
                            )}
                        </Form.Item>
                        <Form.Item>
                            {getFieldDecorator('heartbeatNoresponseout', {
                            rules: [{
                                required: true, message: '请输入重连发出心跳而没有接收到响应的个数',
                            }],
                            })(
                            <Input placeholder={'重连发出心跳而没有接收到响应的个数'}/>
                            )}
                        </Form.Item>
                        <Form.Item>
                            {getFieldDecorator('transactionTimeout', {
                            rules: [{
                                required: true, message: '请输入操作超时时间',
                            }],
                            })(
                            <Input placeholder={'操作超时时间'}/>
                            )}
                        </Form.Item>
                        <Form.Item>
                            {getFieldDecorator('version', {
                            rules: [{
                                required: true, message: '请输入双方协商的版本号',
                            }],
                            })(
                            <Input placeholder={'双方协商的版本号'}/>
                            )}
                        </Form.Item>
                        <Form.Item>
                            {getFieldDecorator('debug', {
                            rules: [{
                                required: true, message: '请选择调试状态',
                            }],
                            })(
                            <Select placeholder={'调试状态'} >
                                <Option value="true">是</Option>
                                <Option value="false">否</Option>
                            </Select>
                            )}
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        )
    }

    componentDidMount(){
        const { dispatch } = this.props
        dispatch({
            type: 'setting/fetchSelSetting',
        })
    }

    componentDidUpdate(){
        console.log("更新。。。。")
        const { key } = this.state
        const { isFresh , dispatch} = this.props
        console.log("更新===》", isFresh, key)
        if(!isFresh){
            dispatch({
                type: 'setting/setFresh',
                payload: true
            })
            this.setView(key)
        }
    }

}

const MyForm = Form.create({})(SettingView);

export default MyForm